<template>
  <div class="wrap">
    <div class="left">
      <img :src="deviceImg" alt="">
    </div>
    <div class="right">
      <div v-if="yxData.length" class="yx">
        <div v-for="(item, index) in yxData" :key="index">
          <div class="yxname">{{ item.point_name }}</div>
          <div>
            <div><img width="40px" :src="'http://ddapi.nz-cloud.com/'+item.icon" alt=""></div>
            <div class="yxvalue" :style="{color: item.color}">{{ item.value }}</div>
          </div>
        </div>
      </div>
      <div v-if="ycData.length" class="yc">
        <div v-for="(item,index) in ycData" :key="index">
          <div class="ycleft">
            <div style="font-size: 18px;color: #a6a6a7;margin-bottom: 10px">{{ item.name }}</div>
            <div><img :src="'http://ddapi.nz-cloud.com/'+item.icon" alt=""></div>
          </div>
          <div class="yccenter">
            <div v-for="(itemChild,indexChild) in item.child" :key="indexChild" :style="{color: itemChild.color}">{{ itemChild.point_name }} {{ itemChild.value }} {{ itemChild.unit }}</div>
          </div>
          <div class="ycright" />
        </div>
      </div>
      <div v-if="ymData.length" class="yc">
        <div v-for="(item,index) in ymData" :key="index">
          <div class="ycleft">
            <div style="font-size: 18px;color: #a6a6a7;margin-bottom: 10px">{{ item.name }}</div>
            <div><img :src="'http://ddapi.nz-cloud.com/'+item.icon" alt=""></div>
          </div>
          <div class="yccenter">
            <div v-for="(itemChild,indexChild) in item.child" :key="indexChild" :style="{color: itemChild.color}">{{ itemChild.name }}{{ itemChild.value }} {{ itemChild.unit }}</div>
          </div>
          <div class="ycright" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getGroupData } from '@/api/stationMonitor'
import { mapGetters } from 'vuex'
export default {
  props: {
    id: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      deviceImg: '',
      ycData: [],
      yxData: [],
      ymData: []
    }
  },
  computed: {
    ...mapGetters([
      'stationId'
    ])
  },
  watch: {
    id() {
      this.getGroupData()
    }
  },
  created() {
    this.getGroupData()
  },
  methods: {
    getGroupData() {
      const option = {
        stationId: this.stationId,
        groupId: this.id
      }
      getGroupData(option).then(res => {
        const { data } = res
        this.deviceImg = `http://ddapi.nz-cloud.com/${data.view}`
        let yx = []
        this.yxData = []
        this.ycData = []
        this.ymData = []
        if (data.yx.length) {
          for (let i = 0; i < 1; i++) {
            yx = data.yx[i].child
          }
          this.yxData = yx.splice(0, 4)
        }
        if (data.yc.length) {
          this.ycData = data.yc
        }
        if (data.ym.length) {
          this.ymData = data.ym
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.wrap {
    display: flex;
    .left {
        flex:1.1;
        display: flex;
        padding: 20px;
        justify-content: center;
        align-content: center;
        border: 1px solid #000;
    }
    .right {
        flex: 3;
        max-height: calc(100vh - 210px);
        overflow: scroll;
        // height: 100%;
        // overflow: scroll;
        .yx {
            border: 1px solid #000;
            height: calc(100% - 82%);
            display: flex;
            &>div {
                width: 25%;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                &>div {
                    display: flex;
                    align-items: center;
                }
                .yxname {
                    color: #a5a5a5;
                    font-size: 20px;
                    margin-bottom: 10px;
                }
                .yxvalue {
                    color: red;
                    font-weight: bold;
                    margin-left: 10px;
                }
            }
        }
        .yc {
            // border: 1px solid #000;
            // max-height: calc(100% - 18%);
            display: flex;
            flex-wrap: wrap;
            padding: 0 10px;
            &>div {
                width: 50%;
                // border: 1px solid #000;
                display: flex;
                padding: 10px;
                &>div {
                    padding: 5px;
                }
                .ycleft {
                    border: 1px solid #000;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    border-radius: 10px 0 0 10px;
                }
                .yccenter {
                    border: 1px solid #000;
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    padding-left: 20px;
                    &>div {
                        margin-bottom: 8px;
                    }
                }
                .ycright {
                    border: 1px solid #000;
                    background: #577481;
                    border-radius: 0 10px 10px 0;
                    width: 50px;
                }
            }
        }
    }
}

</style>
